<template>
    <div>
        <table class="table">
            <tbody class="table">
                <tr>
                    <td>机构名称</td>
                    <td>
                        <input type="text" v-model="can.name">
                    </td>
                </tr>
                <tr>
                    <td>特色服务</td>
                    <td>
                        <select v-model="can.sid">
                            <option :value="0">==请选择==</option>
                            <option v-for="ss in showdata" :value="ss.sid">{{ss.sname}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <input type="button" value="重置查询条件" @click="reset">
                        <input type="button" value="查询" @click="tiao">
                        <input type="button" value="添加机构信息" @click="add">
                        <input type="button" value="批量变更状态" @click="upds">
                        <a href="https://localhost:7017/api/UpFiles/UpDownExcel">导出机构信息</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table">
            <thead class="table">
                <tr>
                    <td>
                        <input type="checkbox" v-model="sta" @change="allsel">
                    </td>
                    <td>机构名称</td>
                    <td>机构封面</td>
                    <td>特色服务</td>
                    <td>营业时间</td>
                    <td>机构地址</td>
                    <td>联系电话</td>
                    <td>发布状态</td>
                    <td>机构详情</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody class="table">
                <tr v-for="a in data">
                    <td>
                        <input type="checkbox" v-model="idstring" :value="a.oid" @change="disallsel">
                    </td>
                    <td>{{a.oname}}</td>
                    <td><img :src="'https://localhost:7017'+a.oimg" style="width: 60px;height: 60px;"></td>
                    <td>{{a.sname}}</td>
                    <td>{{a.strarServiceTime}}</td>
                    <td>{{a.address}}</td>
                    <td>{{a.phone}}</td>
                    <td>{{a.isPublish?"发布":"未发布"}}</td>
                    <td>{{a.onote}}</td>
                    <td>
                        <input type="button" value="删除" @click="del(a.oid)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="skip(1)">
        <input type="button" value="上页" @click="skip(2)">
        <input type="button" value="下页" @click="skip(3)">
        <input type="button" value="尾页" @click="skip(4)">
        一共{{can.totalpage}}页，每页{{can.pagesize}}条，一共{{can.listcount}}条，当前{{can.pageindex}}页
        <select v-model="can.pagesize" @change="tiao">
            <option :value="2">=每页2条信息=</option>
            <option :value="3">=每页3条信息=</option>
            <option :value="4">=每页4条信息=</option>
            <option :value="5">=每页5条信息=</option>
        </select>
        <input type="text" v-model="can.pageindex">
        <input type="button" value="跳转" @click="page">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';

onMounted(() => {
    showdd();
    show();
})
const showdata=ref([{
    "sid": 0,
    "sname": ""
}])

const showdd=()=>{
    axios.get("https://localhost:7017/api/Orga/GetServices").then(res=>{
        showdata.value=res.data;
    })
}

const can=ref({
    name:'',
    sid:0,
    pageindex:1,
    pagesize:2,
    listcount:0,
    totalpage:0
})

const data=ref([{
    "oid": 0,
      "oname": "",
      "oimg": "",
      "sid": 1,
      "strarServiceTime": "",
      "address": "",
      "phone": "",
      "isPublish": false,
      "onote": "",
      "isDel": false,
      "sname": ""
}])

const show=()=>{
    axios.get("https://localhost:7017/api/Orga/GetList",{params:can.value}).then(res=>{
        data.value=res.data.row;
        can.value.listcount=res.data.count,
        can.value.totalpage=Math.ceil(res.data.count/can.value.pagesize);
    })
}

//逻辑删除
const del=(del:number)=>{
    if(confirm("确认删除吗？")){
        axios.delete("https://localhost:7017/api/Orga/RangeDelete",{params:{idstring:del.toString()}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            show();
        }else{
            alert("删除失败")
        }
    })
    }
   
}
const router=useRouter();
//跳转添加视图
const add=()=>{
    router.push({
        path:'/AddView'
    })
}
//改变页容量
const tiao=()=>{
    can.value.pageindex=1;
    show();
}
//定义一个数组Model
const idstring=ref<number[]>([])
//定义一个bool Model
const sta=ref(false)
//全选/全不选
const allsel=()=>{
    if(sta.value){
        data.value.forEach(dd=>{
            idstring.value.push(dd.oid);
        })
    }else{
        idstring.value=[];
    }
}
//反选
const disallsel=()=>{
    if(data.value.length==idstring.value.length){
        sta.value=true;
    }else{
        sta.value=false
    }
}
//批量修改状态
const upds=()=>{
    var ids=idstring.value.toString();
    if(ids.length==0){
        alert("至少选中一项");
        return;
    }
    axios.get("https://localhost:7017/api/Orga/UpdateStutus",{params:{idstring:ids}}).then(res=>{
        if(res.data>0){
            alert("变更成功")
            show();
        }else{
            alert("变更失败")
        }
    })
}
//重置查询条件
const reset=()=>{
    can.value.name='',
    can.value.sid=0
    show();
}
//翻页
const skip=(n:number)=>{
    if(n==1){
        can.value.pageindex=1;
        show();
    }
    if(n==2){
        if(can.value.pageindex>1){
            can.value.pageindex-=1;
            show();
        }else{
            alert("超出页码范围")
        }
    }
    if(n==3){
        if(can.value.pageindex<can.value.totalpage){
            can.value.pageindex+=1;
            show();
        }else{
            alert("超出页码范围")
        }
    }
    if(n==4){
        can.value.pageindex=can.value.totalpage;
        show();
    }
}
//跳转
const page=()=>{
    if(can.value.pageindex>can.value.totalpage){
        alert("超出最大页码，返回尾页");
        can.value.pageindex=can.value.totalpage;
        show();
    }
    if(can.value.pageindex*0!=0){
        alert("请输入数字");
        can.value.pageindex=1;
        show();
        
    }
    show();
}

</script>

<style scoped>

</style>